<template>
	<view class="container">
		<!-- 背景层 -->
		<view class="background">
			<!-- <view class="head-title">智慧消防监管平台</view> -->
		</view>

		<!-- 登录表单 -->
		<view class="login-box">
			<!-- 标题 -->
			<view class="title">登录</view>

			<!-- 用户名输入框 -->
			<view class="input-field">
				<text class="icon user-icon">👤</text>
				<input v-model="userDTO.username" type="text" placeholder="用户名" class="input" />
			</view>

			<!-- 密码输入框 -->
			<view class="input-field">
				<text class="icon lock-icon">🔒</text>
				<input v-model="userDTO.password" type="password" placeholder="输入密码" class="input" />
			</view>

			<!-- 登录按钮 -->
			<button class="login-button" @click="login()">登录</button>

			<!-- 注册和忘记密码链接 -->
			<view class="links">
				<text></text>
				<text>忘记密码</text>
			</view>
		</view>
	</view>
	<wd-action-sheet v-model="changeDevice" title="更换设备检测" @close="close">
	  <view style="padding: 15px 15px 100px 15px;">检测到您更换了设备进行登录，所带来的所有责任将由上一个登录人承担。</view>
	  <view style="display: flex;text-align: center;margin-bottom: 10px;">
		  <wd-button @click="passDevice()" type="success">确定</wd-button>
		  <wd-button @click="changeDevice=false" type="info">取消</wd-button>
	  </view>
	</wd-action-sheet>
</template>

<script>
import request from '@/util/request';
	export default {
		data() {
			return {
				changeDevice:false,
				userDTO:{
					oaid:"",
					username:"",
					password:""
				}
			}
		},
		mounted() {
			this.getOaid()
		},
		methods: {
			login() {
				request.post("/user/login",this.userDTO).then(res=>{
					if(res.code==='200'){
						this.$store.commit("login", res.data)
						if(this.userDTO.password==="123456"){
							uni.navigateTo({
								url: "/pages/my/passward"
							});
							return;
						}
						// 首次登陆
						if(res.data.oaidState==null){
							uni.switchTab({
								url: "/pages/home/index"
							});
						}
						// 其他手机尝试登陆
						if(!res.data.oaidState){
							this.changeDevice=true
						}else{
							//正常登录
							uni.switchTab({
								url: "/pages/home/index"
							});
						}
					}else{
						uni.showToast({
							title: res.msg,
							icon:'error',
							duration: 2000
						});
					}
				})
			},
			passDevice(){
				//正常登录
				uni.switchTab({
					url: "/pages/home/index"
				});
			},
			getOaid() {
				// 使用箭头函数保持 this 指向
				plus.device.getOAID({
					success: (e) => {
						console.log('getOAID success: ' + JSON.stringify(e));
						this.userDTO.oaid = e.oaid;
						console.log(JSON.stringify(this.userDTO))
					},
					fail: (e) => {
						uni.showToast({
							title: "未获取到OAID",
							icon: 'error',
							duration: 2000
						});
						console.log('getOAID failed: ' + JSON.stringify(e));
					}
				});
			},
		}
	}
</script>

<style scoped>
	.container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(186, 191, 225, 0.2);
		height: 100vh;
		overflow: hidden;
		flex-direction: column;
	}

	.background {
		position: absolute;
		top: 0;
		width: 100%;
		height: 350px;
		/* 背景高度可根据需要调整 */
		/* background-color: #4facfe; */
		background-image: url("https://tse2-mm.cn.bing.net/th/id/OIP-C.55uviUbiXPflzwDxiFRawgHaEK?rs=1&pid=ImgDetMain");
		clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
		z-index: 1;
	}

	.head-title {
		font-size: 30px;
		margin-top: 80px;
		text-align: center;
		justify-content: center;
	}

	.login-box {
		position: relative;
		z-index: 2;
		/* 表单位于背景之上 */
		width: 80%;
		background-color: #fff;
		padding: 20px;
		border-radius: 15px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		text-align: center;
	}

	.title {
		font-size: 24px;
		color: #333;
		margin-bottom: 20px;
	}

	.input-field {
		position: relative;
		margin-bottom: 15px;
	}

	.icon {
		position: absolute;
		left: 10px;
		top: 10px;
		font-size: 20px;
	}

	.input {
		width: 85%;
		padding: 10px 10px 10px 40px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 16px;
	}

	.login-button {
		width: 100%;
		padding: 5px;
		background: linear-gradient(to right, #4facfe, #00f2fe);
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 18px;
		margin-top: 10px;
	}

	.links {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #888;
		margin-top: 10px;
	}
</style>
